<template>
  <div>
    <nav-bar title="我的礼券" />
    <div class="content_scroll">
      <div class="tab-control">
        <div
          v-for="(item, index) in title"
          :key="index"
          @click="itemClick(index)"
          :class="[currentIndex == index ? 'tab-list-active' : 'tab-list']"
        >
          {{ item }}
        </div>
      </div>
      <div v-if="currentIndex == 0">
        <coupon-unused :couponList="couponUnused" @unused-click="unusedClick"/>
      </div>
      <div v-else-if="currentIndex == 1">
        <coupon-used :couponList="couponUsed" @used-click="usedClick"/>
      </div>
      <div v-else-if="currentIndex == 2">
        <coupon-expired :couponList="couponExpired" @expired-click="expiredClick"/>
      </div>
    </div>
    <van-popup v-model="show" round>
      <coupon-popup :list="list" @not-click="notClick"/>
    </van-popup>
  </div>
</template>

<script>
import NavBar from "../../../components/common/navbar/NavBar.vue";
import CouponExpired from "./coupon/CouponExpired.vue";
import CouponPopup from './coupon/CouponPopup.vue';
import CouponUnused from "./coupon/CouponUnused.vue";
import CouponUsed from "./coupon/CouponUsed.vue";
export default {
  components: {
    NavBar,
    CouponUnused,
    CouponUsed,
    CouponExpired,
    CouponPopup,
  },
  data() {
    return {
      title: ["未使用", "已使用", "已过期"],
      currentIndex: 0,
      couponUnused: [],
      couponUsed: [],
      couponExpired: [],
      show: false,
      list: {},
    };
  },
  created() {
    this.getCouponList(this.listType);
  },
  activated() {
    this.getCouponList(this.listType);
  },
  methods: {
    getCouponList(str) {
      this.axios.get("/coupon_" + str + ".json", {}).then((res) => {
        // console.log(res.data);
        if (this.currentIndex == 0) {
          this.couponUnused = res.data.list;
        } else if (this.currentIndex == 1) {
          this.couponUsed = res.data.list;
        } else if (this.currentIndex == 2) {
          this.couponExpired = res.data.list;
        }
      });
    },
    itemClick(index) {
      this.currentIndex = index;
      this.getCouponList(this.listType);
    },
    usedClick(index) {
      this.show = true
      this.list = {}
      this.list = this.couponUsed[index]
    },
    unusedClick(index) {
      this.show = true
      this.list = {}
      this.list = this.couponUnused[index]
    },
    expiredClick(index) {
      this.show = true
      this.list = {}
      this.list = this.couponExpired[index]
    },
    notClick(e) {
      this.show = e
    }
  },
  computed: {
    listType() {
      if (this.currentIndex == 0) {
        return "unused";
      } else if (this.currentIndex == 1) {
        return "used";
      } else if (this.currentIndex == 2) {
        return "expired";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.tab-control {
  position: sticky;
  top: 0;
  z-index: 2;
  box-sizing: border-box;
  padding: 0.266667rem 0.426667rem;
  display: flex;
  background: #f4f4f4;
}

.tab-list {
  width: 2.133333rem;
  height: 0.8rem;
  background: #ffffff;
  border: 0.013333rem solid #dddddd;
  border-radius: 0.413333rem;
  font-size: 0.373333rem;
  font-weight: 400;
  text-align: center;
  color: #333333;
  line-height: 0.8rem;
  margin-right: 0.4rem;
}

.tab-list-active {
  width: 2.133333rem;
  height: 0.8rem;
  background: #ff5543;
  border-radius: 0.4rem;
  font-size: 0.373333rem;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
  line-height: 0.8rem;
  margin-right: 0.4rem;
}
</style>